<template>
    <div>
        <el-container>
            <el-header class="aside-logo-div">电商后台管理系统</el-header>
            <el-container>
                <el-aside :width="isCollapse ? '64px' : '200px'" style="overflow-x: hidden;">
                    <!-- 收缩导航 -->
                    <div class="toggle-collapse" @click="toggleCollapse">|||</div>
                    <!-- <div class="aside-logo-div"> -->
                        <!-- <img class="tae" src="../assets/logotae.png" alt=""> -->
                        
                    <!-- </div> -->
                    
                    <!--router设为true,开启菜单的路由模式
                    index属性可以设为路径  -->
                    <!-- 设置导航栏始终只展开一个  :unique-opened="true" -->
                    <el-menu router
                    default-active="/listuser"
                    class="el-menu-vertical-demo" 
                    :unique-opened="true" 
                    :collapse="isCollapse"
                    :collapse-transition="isCollapseTransition">

                        <el-submenu :index="item.id+''" 
                        v-for="(item,index) in menuList" :key="item.id">
                            <template slot="title">
                                <i :class="headImg[index]"></i>
                                <span>{{item.authName}}</span>
                            </template>
                            <el-menu-item :index="menu.path"
                            v-for="menu in item.children" :key="menu.id">
                                <template slot="title">{{menu.authName}}</template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'Xm01Home',

    data() {
        return {
            isCollapseTransition: false,
            isCollapse:false,
            menuList:[],
            headImg:['el-icon-user-solid','el-icon-menu','el-icon-help','el-icon-tickets','el-icon-user-solid'],
            children2:{
                authName:'数据统计2',
                children:[],
                id:147,
                order:'',
                path:'ez'
            },
            children3:{
                authName:'编辑器',
                children:[],
                id:148,
                order:'',
                path:'bianjiqi'
            },
           
            
            
        };
    },

    mounted() {
        this.getMenus();
    },

    methods: {
        //收缩导航及收缩logo
        toggleCollapse() {
            this.isAsideTitle = !this.isAsideTitle;
            this.isCollapse = !this.isCollapse;
        },
        async getMenus(){
            let res=await this.$http.get("/api/private/v1/menus"); 
            res.data[4].children.push(this.children2)
            res.data[4].children.push(this.children3)
            this.menuList=res.data;
            // console.log(res.data[4]);
            // console.log(data);
        }
    },
};
</script>

<style lang="scss" scoped>
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: white;
    height: 92vh;
    color: white;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    // line-height: 160px;
  }
  .el-menu-vertical-demo{
    background-color: white;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .toggle-collapse {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 200px;
        top: -70px;
        display: flex;
        // text-align: center;
        // align-items: center;
        background-color: rgb(244, 240, 240);
        color: rgb(244, 240, 240);
        cursor: pointer;
        letter-spacing: 0.2em;
    }
    .aside-logo-div{
        // position: absolute;
        width: 100%;
        padding:20px 0;
        height: 32px;
        display:flex;
        justify-content: space-around;
        align-items: center;
        background-color: rgb(4, 9, 1);
        color:gainsboro;
        span{font-weight: bold;font-size:24px;}
    }
</style>